import React, { memo, useContext, useEffect } from "react";
import { RankingRightBox } from "./style";
import { useSelector, shallowEqual, useDispatch } from "react-redux";
import {
    ClockCircleOutlined,
    PlayCircleOutlined,
    DownloadOutlined,
    FolderAddOutlined,
    ShareAltOutlined,
    MessageOutlined,
} from "@ant-design/icons";
import { Button } from "antd";
import { gitMusicDetailAction, geMusicUrlAction } from "../../store/actionCreators";
import myContext from "../../createContext";
export default memo(function RankingRight(param) {
    const { musicDetails, musicUrl, rankingConten } = useSelector(
        (state) => ({
            musicDetails: state.getIn(["ranking", "musicDetails"]),
            musicUrl: state.getIn(["ranking", "musicUrl"]),
            rankingConten: state.getIn(["ranking", "rankingConten"]),
        }),
        shallowEqual
    );
    //把url添加到歌曲详情里边
    if (musicDetails.length !== 0 && musicUrl.length !== 0) {
        for (let i = 0; i < musicDetails.length; i++) {
            const item = musicDetails[i];
            for (let j = 0; j < musicUrl.length; j++) {
                const element = musicUrl[j];
                if (item.id === element.id) {
                    item.url = element.url;
                }
            }
        }
    }
    console.log(rankingConten, "右边");
    const { name } = useContext(myContext);
    const dispatch = useDispatch();
    useEffect(() => {
        if (rankingConten.trackIds) {
            const ids = rankingConten.trackIds.map((item) => {
                return item.id;
            });
            dispatch(gitMusicDetailAction(ids.join(",")));
            dispatch(geMusicUrlAction(ids.join(",")));
        }
    }, [dispatch, rankingConten.trackIds]);
    return (
        <RankingRightBox>
            <div className="conten_top">
                <div className="cover_img">
                    <img className="img" src={rankingConten.coverImgUrl} alt="" />
                </div>
                <div className="conten_info">
                    <div className="title">{rankingConten.name}</div>
                    <div className="updata_time">
                        <ClockCircleOutlined />
                        <span className="title_time">最新更新:</span>
                        <span className="time">{rankingConten.trackUpdateTime}</span>
                        <span className="undata_period">（{name}）</span>
                    </div>
                    <div className="btns">
                        <Button type="primary" icon={<PlayCircleOutlined />} size="default">
                            播放
                        </Button>
                        <div className="sprite_button counts folder_add_outlined">
                            <i className="sprite_button">{rankingConten.subscribedCount}</i>
                        </div>
                        <div className="sprite_button counts share_count">
                            <i className="sprite_button">{rankingConten.shareCount}</i>
                        </div>
                        <div className="sprite_button counts download_outlined">
                            <i className="sprite_button">下载</i>
                        </div>
                        <div className="sprite_button counts message_outlined">
                            <i className="sprite_button"> {rankingConten.commentCount}</i>
                        </div>
                    </div>
                </div>
            </div>
            <div className="music_details_list">
                {musicDetails.map((item) => {
                    return (
                        <div key={item.id} className="details_item">
                            <div>{item.name}</div>
                            {item.ar.map((arItem) => {
                                return <div key={(arItem.id, arItem.name)}>{arItem.name}</div>;
                            })}{" "}
                        </div>
                    );
                })}
            </div>
        </RankingRightBox>
    );
});
